package ui.home.column2

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.painter.BitmapPainter
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import theme.EasyChatTheme
import ui.compose.NetworkImage
import ui.compose.RectIconButton
import ui.home.HomeViewModel


/**
 * @author wei kunJie
 * @date 2024/3/11 13:31:11
 * 搜索输入框
 */
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun SearchRow(
    easyChatTheme: MutableState<EasyChatTheme>,
    text: MutableState<String>,
    homeViewModel: HomeViewModel,
    onAddClick: () -> Unit
) {
    // 焦点
    val hasFocus = remember { mutableStateOf(false) }
    val expanded = remember { mutableStateOf(false) }
    Row(
        modifier = Modifier.padding(horizontal = 15.dp).onFocusChanged { hasFocus.value = it.hasFocus })
    {
        BasicTextField(
            value = text.value,
            onValueChange = {
                text.value = it
            },
            modifier = Modifier
                .background(
                    color = Color(0X11363636),
                    shape = RoundedCornerShape(4.dp)
                )
                .height(30.dp)
                .weight(1f)
                .border(
                    border = if (hasFocus.value)
                        BorderStroke(0.8.dp, easyChatTheme.value.mainColor)
                    else BorderStroke(0.dp, Color.Transparent),
                    shape = RoundedCornerShape(4.dp)
                ),
            singleLine = true,
            cursorBrush = SolidColor(easyChatTheme.value.mainColor),//游标颜色
            decorationBox = @Composable { innerTextField ->
                Row(
                    verticalAlignment = Alignment.CenterVertically,
                    modifier = Modifier.padding(start = 8.dp)
                ) {
                    //左边的放大镜图标
                    Icon(
                        painter = painterResource("icon/ic_search.svg"),
                        contentDescription = "搜索",
                        tint = Color(0XFF696969),
                        modifier = Modifier.size(18.dp)
                    )
                    //输入框
                    Box(
                        modifier = Modifier.weight(1f).fillMaxHeight().padding(horizontal = 3.dp),
                        contentAlignment = Alignment.CenterStart
                    ) {
                        innerTextField()//输入区
                        //hint
                        if (text.value.isEmpty()) {
                            Text(
                                text = "搜索", style = TextStyle(
                                    fontSize = 12.sp,
                                    color = Color(0XEE696969)
                                )
                            )
                        }
                    }
                }
            }
        )
        Spacer(modifier = Modifier.width(10.dp))
        //添加按钮
        RectIconButton(
            onClick = {
                //点击添加
                expanded.value = true
            },
            modifier = Modifier.size(30.dp)
                .clip(RoundedCornerShape(4.dp))
                .background(Color(0X11363636))
        ) {
            Icon(
                painter = painterResource("icon/ic_add.svg"),
                contentDescription = "添加",
                tint = Color(0XFF696969),
                modifier = Modifier.size(30.dp).padding(7.dp)
            )
        }
    }
    Row(modifier = Modifier.padding(start = 211.dp)) {
        ExposedDropdownMenuBox(
            modifier = Modifier.fillMaxWidth(),
            expanded = expanded.value,
            onExpandedChange = {},
        ) {
            ExposedDropdownMenu(expanded = expanded.value,
                modifier = Modifier.width(120.dp),
                onDismissRequest = {
                    expanded.value = false
                }) {
                Column {
                    DropdownMenuItem(
                        modifier = Modifier.height(32.dp),
                        onClick = {
                            homeViewModel.createGroupDialog.value = true
                            expanded.value = false
                        }) {
                        Row(verticalAlignment = Alignment.CenterVertically) {
                            Icon(
                                painter = painterResource("icon/ic_group.svg"),
                                contentDescription = "加好友/群",
                                modifier = Modifier.size(17.dp),
                                tint = Color(0xFF515151)
                            )
                            Spacer(Modifier.width(5.dp))
                            Text(text = "发起群聊", fontSize = 14.sp)
                        }

                    }
                    DropdownMenuItem(
                        modifier = Modifier.height(32.dp),
                        onClick = {
                            onAddClick()
                            expanded.value = false
                        }) {
                        Row(verticalAlignment = Alignment.CenterVertically) {
                            Icon(
                                painter = painterResource("icon/ic_add_friend.svg"),
                                contentDescription = "加好友/群",
                                modifier = Modifier.size(17.dp),
                                tint = Color(0xFF515151)
                            )
                            Spacer(Modifier.width(5.dp))
                            Text(text = "加好友/群", fontSize = 14.sp)
                        }
                    }
                }
            }
        }
    }

}